<template>
    <div>
      <router-view :cars="cars" :selectedCar="selectedCar" @updateCar="updateCar" />
    </div>
  </template>
  
  <script setup>
  import { ref } from "vue";
  import CarList from "./CarList.vue";
  import CarEdit from "./CarEdit.vue";
  
  const cars = ref([
    {
      id: 1,
      name: "奥迪 Q7",
      price: 650000,
    },
    {
      id: 2,
      name: "宝马 X6",
      price: 700000,
    },
    {
      id: 3,
      name: "奔驰 S350",
      price: 1200000,
    },
  ]);
  
  const selectedCar = ref(null);
  
  function updateCar(car) {
    const index = cars.value.findIndex((c) => c.id === car.id);
    cars.value[index] = car;
  }
  </script>